(function () {
    // 设置代码显示区域屏幕的大小
    let computedStyle = document.defaultView.getComputedStyle(optionCheckBox, null);
    let textareaHeight = parseInt(computedStyle.height) - 5 + 'px';
    let textareaWidth = computedStyle.width;
    textarea.style.width = textareaWidth;
    textarea.style.height = textareaHeight;
    //设置样式区域的高度
    const optionStyle = document.defaultView.getComputedStyle(optionClick, null);
    let optionHeight = parseInt(optionStyle.height) - 45 + 'px';
    console.log('height', optionHeight)
    observation.style.height = optionHeight;
})();
//更新数据， 后期在引入数据节流或者防抖的函数
class GetMoudel {
    //最新值
    static newValue = {};
    constructor(obj) {
        // 获取节点
        this.$input = document.querySelector(obj.el);
        this.$data = obj.data;
        this.order = obj.order;
        // 收容所
        var ss = {};
        // 绑定事件
        this.add(this.$input, this.$data, ss);
        //事件触发，开始更新最新数据
        this.lister(ss, this.order);
    }
    /**
     *为每一个事件都绑定上处理函数
     *
     * @param {*} val 键
     * @param {*} key 值
     * @memberof GetMoudel
     */
    add(val, key, ss) {
        //判断值使其不能重复赋值
        let arr = {}
        val.addEventListener(key, function (event) {
            if (arr.foo && arr.foo == val.value) return;
            arr.foo = val.value;
            ss.foo = val.value;
        }, false)
    }
    lister(ss, key) {
        Object.defineProperty(ss, 'foo', {
            get(val) {
                return val
            },
            set(val) {
                GetMoudel.newValue[key] = val;
                judgefunc(GetMoudel.newValue);
            }
        })
    }
}
//开始更新数据。
(function () {
    //装有所有的页面input的class
    let inputArr = ['.cantainer-nums', '.childbox-nums', ".childbox-rows", ".childbox-columns", ".rows-spacing",
        ".colomn-spacing", ".cantainer-width", ".cantainer-height",
        ".childbox-width", ".childbox-height"]
    //遍历设置调用更新数据
    function aotomoudel(arr) {
        let obj = {};
        arr.forEach((key, index) => {
            obj.el = key;
            obj.order = index;
            obj.data = 'click';
            new GetMoudel(obj)
        });
    }
    aotomoudel(inputArr)
})()

// -------------------代码显示----------------------
//判断函数如果满足某种田间才调用某个函数不然不会去调用
function judgefunc(moudel) {
    //是否两个值都变化了，
    if (moudel[0] && moudel[0] === moudel[1] && moudel[2] * moudel[3] == moudel[0]) {
        //更新用户的数值变化
        callback();
        //调用回调函数创建盒子
        setclass(observation, moudel)
        // setGrid(observation, moudel);
        // fragment(observation, moudel);

    }

}

//自定义内容
function callback() {
    let cssStayle =
        `.father{
    display: grid;
    grid-template-rows: repeat(${GetMoudel.newValue[2]}fr);
    grid-template-columns: repeat(${GetMoudel.newValue[3]}fr);
    }
.child{
        background-color: green;
    }
`
    textarea.innerHTML = cssStayle;
}
//-----------------------------------------------以下是代码错误区域-------------------------------------------------
//后期改为自由设置样式，格式能够正常显示
function fragment(code, moudel) {
    let node = document.querySelectorAll('.lookBox');
    let length = node.length;
    let fragments = document.createDocumentFragment();
    let moudelNum = moudel[1];
    //创建dom片段
    if (node.length) {
        for (let i = 0; i < node.length; i++) {
            fragments.appendChild(node[i]);
            console.log("保存子节点中的盒子：", node[i])
        }
        //判断节点
        if (moudelNum > length) {
            let nums = moudelNum - length;

            for (let i = 0; i < nums; i++) {
                let div = document.createElement("div");
                div.setAttribute('class', 'lookBox');
                fragments.appendChild(div);
            }
        }
        if (moudelNum < length) {
            let nums = length - moudelNum;
            for (let i = 0; i < nums; i++) {
                node[i].parentNode.removeChild(node[i]);
            }
        }
    }
    function boxStyle(nodechild, fragments) {
        const optionStyle = document.defaultView.getComputedStyle(observation, null);
        let height = parseInt(optionStyle.height);
        let width = parseInt(optionStyle.width);
        let length = fragments.childNodes.length;
        nodechild.style.height = height / length + 'px';
        nodechild.style.width = width / length + 'px';
    }
    //初始化一下；
    if (!node.length) {
        let div;
        for (let i = 0; i < moudelNum; i++) {
            div = document.createElement("div");
            div.setAttribute('class', 'lookBox');
            // observation.appendChild(div)
            observation.appendChild(div)
            // console.log('我创建了几个盒子', i)
        }
    }
    //处理样式
    if (fragments.childNodes) {
        console.log("准备设置样式的盒子", fragments.childNodes)
        fragments.childNodes.forEach(child => {
            console.log(child)
            boxStyle(child, fragments);
        })
    }
    //将片段加入视图
    observation.appendChild(fragments)
}
//使用grid;  有点问题在重构一下
function setGrid(code, moudel) {
    code.style.display = 'grid';
    let creatDiv = moudel[2] * moudel[3];
    let fragments = document.createDocumentFragment();
    //子节点存在
    let node = code.childNodes;
    console.log("文本中存有节点", node)
    if (node.length) {
        for (let i = 0; i < node.length; i++) {
            // 加入dom片段中
            fragments.appendChild(node[i]);
        }
        // 过量的节点被删除
        if (fragments.childNodes.length > creatDiv) {
            let nums = fragments.childNodes.length - creatDiv;
            console.log('删除多余的节点1')
            for (let i = 0; i < nums; i++) {
                fragments.childNodes[i].parentNode.removeChild(fragments.childNodes[i]);
            }
        }
    }
    for (let i = 0; i < creatDiv; i++) {
        let div = document.createElement("div");
        // div.setAttribute('class', 'lookBox');
        fragments.appendChild(div);
    }
    // 过量的节点被删除
    console.log('节点', fragments.childNodes)
    if (fragments.childNodes.length > creatDiv) {
        let nums = fragments.childNodes.length - creatDiv;
        console.log('删除多余的节点2')
        for (let i = 0; i < nums; i++) {
            fragments.childNodes[i].parentNode.removeChild(fragments.childNodes[i]);
        }
    }
    //设置样式
    boxStyle(observation, moudel)
    code.appendChild(fragments)

    function boxStyle(nodechild, moudel) {
        const optionStyle = document.defaultView.getComputedStyle(observation, null);
        let height = parseInt(optionStyle.height);
        let width = parseInt(optionStyle.width);
        let rows = height / moudel[2] + 'px';
        let columns = width / moudel[3] + 'px';
        let strRow = rows, strColums = columns;
        console.log('colums:', columns)
        //行
        console.log('hang:', moudel[2])
        console.log('kuang:', moudel[3])
        for (let i = 0; i < moudel[2] - 1; i++) {
            strRow += ' ' + rows;
        }
        console.log('strRow', strRow)

        // 列
        for (let i = 0; i < moudel[3] - 1; i++) {
            strColums += ' ' + columns
        }
        console.log('strColums', strColums);
        nodechild.style.gridTemplateRows = strRow;
        nodechild.style.gridTemplateColumns = strColums;
    }

}
//-----------------------------------------------以上是代码错误区域-------------------------------------------------

//使用条件当元素数量等于栅格数量时候才能调用；
function setclass(node, moudel) {
    // node.style.display = 'grid';
    let fragments = document.createDocumentFragment();
    let creatDiv = moudel[2] * moudel[3];
    if (node.childNodes.length) {
        for (let i = 0; i < node.childNodes.length; i++) {
            fragments.appendChild(node.childNodes[i])
        }
    }
    //创造节点
    if (node.childNodes.length < creatDiv) {
        for (let i = 0; i < creatDiv; i++) {
            let div = document.createElement("div");
            div.setAttribute('class', 'lookBox');
            fragments.appendChild(div);

        }
    }
    //设置样式
    boxStyle(observation, moudel)
    node.appendChild(fragments)
    //删除多余节点
    if (node.childNodes.length > creatDiv) {
        let nums = node.childNodes.length - creatDiv;
        for (let i = 0; i < nums; i++) {
            node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
        }
    }
    //样式函数
    function boxStyle(nodechild, moudel) {
        const optionStyle = document.defaultView.getComputedStyle(observation, null);
        let height = parseInt(optionStyle.height);
        let width = parseInt(optionStyle.width);
        let rows = height / moudel[2] + 'px';
        let columns = width / moudel[3] + 'px';
        let strRow = rows, strColums = columns;
        for (let i = 0; i < moudel[2] - 1; i++) {
            strRow += ' ' + rows;
        }
        for (let i = 0; i < moudel[3] - 1; i++) {
            strColums += ' ' + columns
        }
        nodechild.style.gridTemplateRows = strRow;
        nodechild.style.gridTemplateColumns = strColums;
    }
}
//子元素仅有一个时候
function attOnce(node) {
    let oncenode = node.childNodes[0];
    
}